{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block title %}Appointment Details{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">Appointment Details</h4>
                </div>
                <div class="card-body">
                    <dl class="row">
                        <dt class="col-sm-4">Service:</dt>
                        <dd class="col-sm-8">{{ appointment.service.name }}</dd>
                        
                        <dt class="col-sm-4">Date & Time:</dt>
                        <dd class="col-sm-8">{{ appointment.start_time|date:"F j, Y" }} at {{ appointment.start_time|time:"g:i A" }}</dd>
                        
                        <dt class="col-sm-4">Duration:</dt>
                        <dd class="col-sm-8">{{ appointment.service.duration|time:"H:i" }} hours</dd>
                        
                        {% if appointment.staff_member %}
                        <dt class="col-sm-4">Staff Member:</dt>
                        <dd class="col-sm-8">{{ appointment.staff_member.user.get_full_name|default:appointment.staff_member.user.username }}</dd>
                        {% endif %}
                        
                        <dt class="col-sm-4">Status:</dt>
                        <dd class="col-sm-8">
                            <span class="badge 
                                {% if appointment.status == 'confirmed' %}bg-success
                                {% elif appointment.status == 'pending' %}bg-warning
                                {% elif appointment.status == 'cancelled' %}bg-danger
                                {% else %}bg-secondary{% endif %}">
                                {{ appointment.get_status_display }}
                            </span>
                        </dd>
                        
                        {% if appointment.notes %}
                        <dt class="col-sm-4">Notes:</dt>
                        <dd class="col-sm-8">{{ appointment.notes|linebreaks }}</dd>
                        {% endif %}
                    </dl>
                    
                    <div class="mt-4">
                        {% if request.user == appointment.client or request.user.is_staff %}
                            <a href="{% url 'appointments:appointment-update' appointment.pk %}" class="btn btn-primary">
                                <i class="fas fa-edit"></i> Edit Appointment
                            </a>
                            <a href="{% url 'appointments:appointment-delete' appointment.pk %}" class="btn btn-danger">
                                <i class="fas fa-trash"></i> Cancel Appointment
                            </a>
                        {% endif %}
                        <a href="{% url 'appointments:appointment-list' %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>
            </div>

            <!-- Notes Section -->
            {% if request.user.is_staff %}
            <div class="card mt-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">Add Note</h5>
                </div>
                <div class="card-body">
                    <form method="post" action="{% url 'appointments:add-appointment-note' appointment.pk %}">
                        {% csrf_token %}
                        {{ note_form|crispy }}
                        <button type="submit" class="btn btn-primary mt-2">
                            <i class="fas fa-save"></i> Save Note
                        </button>
                    </form>
                </div>
            </div>
            {% endif %}

            <!-- Existing Notes -->
            {% if appointment.notes_history.all %}
            <div class="card mt-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">Notes History</h5>
                </div>
                <div class="list-group list-group-flush">
                    {% for note in appointment.notes_history.all %}
                    <div class="list-group-item">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">{{ note.author.get_full_name|default:note.author.username }}</h6>
                            <small class="text-muted">{{ note.created_at|date:"M j, Y H:i" }}</small>
                        </div>
                        <p class="mb-1">{{ note.note }}</p>
                        {% if request.user == note.author or request.user.is_staff %}
                        <div class="text-end">
                            <a href="{% url 'appointments:delete-appointment-note' note.pk %}" class="text-danger" 
                               onclick="return confirm('Are you sure you want to delete this note?')">
                                <i class="fas fa-trash"></i> Delete
                            </a>
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Initialize any JavaScript components here
    document.addEventListener('DOMContentLoaded', function() {
        // Add any client-side functionality needed
    });
</script>
{% endblock %}